<template>
  <div>
      发布人：<input type="text" v-model.trim.lazy="name">
      <br>
      分类:
      <select v-model.trim.lazy="gg">
        <option value="公告">公告</option>
        <option value="简讯">简讯</option>
        <option value="会议">会议</option>
        <option value="比赛">比赛</option>
      </select>
      <span>你选择了：<i style="color:red">{{gg}}</i></span>
      <br>
      标题：<input type="text" v-model.trim.lazy="title">
      <br>
      <input type="file" @change="img" id="im">
      <label for="im">插入图片</label>
      <img :src="defau">
      <input
        type="button"
        v-if="this.$route.params.id"
        value="更新"
        @click="init">
      <input
        type="button"
        v-if="!this.$route.params.id"
        value="发布"
        @click="send">
      <input type="button" value="返回" @click="fanhui">
      <input type="button" value="主页" @click="home">
      <textarea v-model.trim.lazy="content"></textarea>
  </div>
</template>

<script>
import { sendGg, adminNto } from 'com/shuju'
export default {
  name: 'WriteGg',
  data () {
    return {
      gg: '',
      title: '',
      name: '',
      content: '',
      defau: null
    }
  },
  methods: {
    img () {
      if (window.FileReader) {
        var reader = new FileReader()
        var f = event.target.files[0]
        reader.readAsDataURL(f)
        var _this = this
        reader.onload = function (evt) {
          _this.defau = evt.target.result
        }
      } else {
        alert('您的浏览器不支持')
        return 0
      }
    },
    fanhui () {
      this.$router.go(-1)
    },
    home () {
      this.$router.replace('/home')
    },
    init () {
      var tf = confirm('是否确认更新？')
      if (tf) {
        var data = new FormData()
        data.set('avatar', this.defau)
        data.set('name', this.name)
        data.set('title', this.title)
        data.set('content', this.content)
        data.set('bulletinType', this.gg)
        data.set('id', this.$route.params.id)
        sendGg(data, this)
      }
    },
    send () {
      var tf = confirm('是否确认发布？')
      if (tf) {
        var data = new FormData()
        data.set('avatar', this.defau)
        data.set('name', this.name)
        data.set('title', this.title)
        data.set('content', this.content)
        data.set('bulletinType', this.gg)
        sendGg(data, this)
      }
    }
  },
  mounted () {
    if (this.$route.params.id) {
      adminNto(this.$route.params.id, this)
    }
  }
}
</script>

<style lang="stylus" scoped>
  input,
  select{
    margin-top: .2rem
    margin-left: .2rem
  }
  textarea{
    outline: none
    resize: none
    width: 100%
    height: auto
    min-height: 700px
    padding: .2rem
  }
  img{
    min-width: 800px
    min-height: 450px
    width: 800px
    height: 450px
    border: 1px solid red
  }
</style>
